<template>
  <div>
    <!-- 级联选择器全局组件 -->
    <el-card>
      <div class="wrapper">
        <div>
          <span>一级分类</span>
          <el-cascader
            v-model="category1Id"
            :options="category1List"
            :disabled="!isShow"
            :props="{
              value: 'id',
              label: 'name',
            }"
            @change="handleChange1"
          ></el-cascader>
        </div>
        <div>
          <span>二级分类</span>
          <el-cascader
            v-model="category2Id"
            :options="category2List"
            :disabled="!isShow"
            :props="{
              value: 'id',
              label: 'name',
            }"
            @change="handleChange2"
          ></el-cascader>
        </div>
        <div>
          <span>三级分类</span>
          <el-cascader
            v-model="category3Id"
            :options="category3List"
            :disabled="!isShow"
            :props="{
              value: 'id',
              label: 'name',
            }"
            @change="handleChange3"
          ></el-cascader>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Category",
  // 控制切换为编辑模式时，使级联选择器禁用
  props:['isShow'],
  data() {
    return {
      category1Id: [],
      category2Id: [],
      category3Id: [],
    };
  },
  mounted() {
    this.getCategory1List();
  },
  computed: {
    ...mapGetters(["category1List", "category2List", "category3List"]),
  },
  methods: {
    // 获取一级分类商品数据
    getCategory1List() {
      this.$store.dispatch("attrs/getCategory1List");
    },
    // 一级级联选择器选中某一项
    handleChange1(value) {
      // 获取二级级联选择器数据
      this.$store.dispatch("attrs/getCategory2List", { category1Id: value[0] });
      // 当一级分类发生变化的时候，清除上一次的二级、三级分类
      this.category2Id = ''
      this.category3Id = ''
    },
    // 二级级联选择器选中某一项
    handleChange2(value) {
      // 获取三级级联选择器数据
      this.$store.dispatch("attrs/getCategory3List", { category2Id: value[0] });
      // 当二级分类发生变化的时候，清除上一次三级分类
      this.category3Id = ''
    },
    // 三级分类被选中，获取对应商品属性数据
    handleChange3() {
      this.$emit('getCategoryId',{category1Id:this.category1Id[0],category2Id:this.category2Id[0],category3Id:this.category3Id[0]})
    },
  },
};
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  span {
    font-weight: bold;
    margin: 0 20px 0 40px;
  }
}
</style>